import { defineStore } from 'pinia'
import { ref, watch, onMounted } from 'vue'
import type { RouteLocationNormalizedLoaded } from 'vue-router'

// 面包屑标签接口
export interface BreadcrumbTag {
  title: string
  path: string
  icon?: string
  closable?: boolean
}

// 本地存储键
const BREADCRUMB_TAGS_KEY = 'breadcrumb_tags'
const BREADCRUMB_TIMESTAMP_KEY = 'breadcrumb_tags_timestamp'

// 持久化存储有效期 (24小时，单位毫秒)
const STORAGE_EXPIRATION = 24 * 60 * 60 * 1000

// 定义面包屑状态管理
export const useBreadcrumbStore = defineStore('breadcrumb', () => {
  // 标签集合状态
  const tags = ref<BreadcrumbTag[]>([
    { title: '首页', path: '/dashboard', icon: 'home', closable: false }
  ])

  // 清除所有面包屑数据
  const clearBreadcrumbData = () => {
    console.log('正在清除面包屑数据...')
    // 重置状态
    tags.value = [
      { title: '首页', path: '/dashboard', icon: 'home', closable: false }
    ]
    
    // 清除本地存储
    localStorage.removeItem(BREADCRUMB_TAGS_KEY)
    localStorage.removeItem(BREADCRUMB_TIMESTAMP_KEY)
    localStorage.removeItem('login_timestamp')
    localStorage.removeItem('current_login_timestamp')
    
    console.log('面包屑数据已清除')
  }

  // 初始化：从localStorage加载
  const initFromStorage = () => {
    try {
      // 检查用户是否已登录
      const accessToken = localStorage.getItem('accessToken')
      if (!accessToken) {
        console.log('用户未登录，使用默认面包屑')
        resetToDefault()
        return
      }
      
      const storedTags = localStorage.getItem(BREADCRUMB_TAGS_KEY)
      const timestamp = localStorage.getItem(BREADCRUMB_TIMESTAMP_KEY)
      const lastLoginTime = localStorage.getItem('login_timestamp')
      const currentLoginTime = localStorage.getItem('current_login_timestamp')
      
      // 检查是否是重新登录的情况 - 如果当前登录时间戳与上次保存的不一致，说明是重新登录
      if (lastLoginTime !== currentLoginTime) {
        console.log('检测到用户重新登录，重置面包屑为默认状态')
        resetToDefault()
        // 更新登录时间戳
        if (currentLoginTime) {
          localStorage.setItem('login_timestamp', currentLoginTime)
        }
        return
      }
      
      // 检查数据是否过期
      if (storedTags && timestamp) {
        const currentTime = new Date().getTime()
        const storedTime = parseInt(timestamp, 10)
        
        if ((currentTime - storedTime) < STORAGE_EXPIRATION) {
          const parsedTags = JSON.parse(storedTags)
          
          // 确保数据有效且首页标签存在
          if (Array.isArray(parsedTags) && parsedTags.length > 0) {
            const hasHomePage = parsedTags.some(tag => tag.path === '/dashboard')
            
            // 如果没有首页，添加它
            if (!hasHomePage) {
              parsedTags.unshift({ title: '首页', path: '/dashboard', icon: 'home', closable: false })
            }
            
            tags.value = parsedTags
            console.log('从存储中恢复了面包屑标签:', parsedTags.length)
          }
        } else {
          console.log('面包屑数据已过期，使用默认值')
          resetToDefault()
        }
      } else {
        console.log('未找到面包屑存储数据，使用默认值')
        resetToDefault()
      }
    } catch (error) {
      console.error('恢复面包屑标签失败:', error)
      resetToDefault()
    }
  }

  // 保存到localStorage
  const saveToStorage = () => {
    try {
      // 只有在用户已登录时才保存数据
      const accessToken = localStorage.getItem('accessToken')
      if (!accessToken) {
        console.log('用户未登录，跳过保存面包屑数据')
        return
      }
      
      localStorage.setItem(BREADCRUMB_TAGS_KEY, JSON.stringify(tags.value))
      localStorage.setItem(BREADCRUMB_TIMESTAMP_KEY, String(new Date().getTime()))
      console.log('面包屑数据已保存，标签数量:', tags.value.length)
    } catch (error) {
      console.error('保存面包屑标签失败:', error)
    }
  }

  // 重置为默认值
  const resetToDefault = () => {
    tags.value = [
      { title: '首页', path: '/dashboard', icon: 'home', closable: false }
    ]
    saveToStorage()
  }

  // 添加标签
  const addTag = (route: RouteLocationNormalizedLoaded) => {
    // 忽略登录、注册等非内部页面
    if (route.path.includes('/login') || route.path.includes('/register') || route.path.includes('/forget')) {
      return
    }

    // 检查是否已存在相同路径的标签
    if (tags.value.some(tag => tag.path === route.path)) {
      return
    }

    // 从路由元数据获取标题和图标
    const title = route.meta.title as string || route.name?.toString() || route.path.split('/').pop() || '未命名页面'
    const icon = route.meta.icon as string

    // 添加新标签
    tags.value.push({
      title,
      path: route.path,
      icon,
      closable: true
    })

    // 保存到存储
    saveToStorage()
  }

  // 移除标签
  const removeTag = (path: string): string => {
    // 查找要删除的标签索引
    const index = tags.value.findIndex(tag => tag.path === path)
    
    // 如果标签不存在或者是首页（不可关闭），直接返回当前路径
    if (index === -1 || path === '/dashboard') {
      return path
    }
    
    // 存储被删除标签的下一个要激活的路径
    // 优先使用后面的标签，如果是最后一个标签则使用前面的标签
    let nextPath = ''
    
    if (index < tags.value.length - 1) {
      // 如果不是最后一个标签，使用后面的标签
      nextPath = tags.value[index + 1].path
    } else if (index > 0) {
      // 如果是最后一个标签，使用前面的标签
      nextPath = tags.value[index - 1].path
    } else {
      // 如果只有一个标签（理论上不会执行到这里，因为首页标签无法删除）
      nextPath = '/dashboard'
    }
    
    // 删除标签
    tags.value.splice(index, 1)
    
    // 保存到存储
    saveToStorage()
    
    return nextPath
  }

  // 监听标签变化，自动保存
  watch(tags, () => {
    saveToStorage()
  }, { deep: true })

  // 初始化
  onMounted(() => {
    // 检查登录状态和存储的面包屑
    initFromStorage()
    
    // 监听localStorage变化，特别是accessToken的移除
    if (typeof window !== 'undefined') {
      window.addEventListener('storage', (e) => {
        if (e.key === 'accessToken' && !e.newValue) {
          console.log('检测到跨窗口登出，重置面包屑')
          clearBreadcrumbData()
        }
      })
    }
  })

  // 导出状态和方法
  return {
    tags,
    addTag,
    removeTag,
    resetToDefault,
    clearBreadcrumbData,
    initFromStorage
  }
}) 